html, body {
	margin: 0;
	padding: 0;
}

header, nav, article, aside, footer {
	box-sizing: border-box;
}

header {
	border: 1px solid red;
}

nav {
	border: 1px solid orange;
}

article {
	border: 1px solid #e5e5e5;
}

aside {
	border: 1px solid #000;
}

footer {
	border: 1px solid blue;
}

/* 启动flex模式，主轴按行排列 换行 */
.box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.box > * {
	padding: 10px;
	flex: 1 100%;
}

/* 媒体查询 将nav与aside放在同一行 and后必须有空格 */
@media all and (min-width: 600px) {
	.box nav { flex: 1 auto; }
	.box aside { flex: 1 auto; }
}

/* 媒体查询 将nav与aside放在article两侧 */
@media all and (min-width: 1000px) {
	.box nav { order: 1; }
	.box article { order: 2; flex: 3 0%; }
	.box aside { order: 3; }
	.box footer { order: 4; }
}
























